<template>
  <view class="goodsCont">
    <!-- 标题栏 -->
    <nav-custom :showSearch="false"></nav-custom>
    <view class="cont">
      <!-- 轮播图 -->
      <swiper class="banner" :indicator-dots="true" :autoplay="true" indicator-active-color="#ffe32a">
        <swiper-item v-for="(item, index) in listImg" :key="item.id">
          <view class="swiper-item">
            <image class="swiperImg" :src="item" mode="widthFix"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 产品名字 -->
      <view class="fontBox margin-bottom align-center">
        <view class="goodsfont padding-bottom-sm" v-if="glist.name">{{ glist.name }}</view>
        <view class="">{{ glist.french }}</view>
      </view>
      <!-- 产品规模 -->
      <view class="goodsScale flex u-border-bottom">
        <view :class="handleStyle == index ? 'flexSuba' : ''" class="scale" v-for="(item, index) in glist.list"
          :key="index" @click="handleScale(index)">
          <view v-show="item.spec" class="">{{ item.spec }}</view>
          <view v-show="item.weight" class="">({{ item.weight }})</view>
          <view v-show="item.edible" class="">({{ item.edible }})</view>
        </view>
      </view>
      <!-- 产品价格 -->
      <view class="goodsPrice u-border-bottom text-left">
        <text>￥</text>
        <text class="price">{{ goodsPrice }}</text>
      </view>
      <!-- 产品配送 -->
      <view class="goodsGet u-border-bottom f12 text-left">
        <view class="margin-bottom-xs">
          <text class="iconfont icon icon-shizhong"></text>
          最早{{ myDate.myYear }}年{{ myDate.myMonth }}月{{ myDate.myDay }}日配送
          <text class="iconfont icon icon-shizhong margin-left"></text>
          <text v-if="glist">
            {{ glist ? goodsAhead : '' }}
          </text>
        </view>
        <view class="margin-top-sm">
          <text v-if="goodsSize" class="margin-right">
            <text class="iconfont icon icon-biaoqian f18"></text>
            约{{ goodsSize }}
          </text>
          <text v-if="goodsfittings">
            <text class="iconfont icon icon-canju"></text>
            含{{ goodsfittings }}
          </text>
        </view>
      </view>
      <!-- 产品标签 -->
      <view v-show="glist.fname" class="goodsTag u-border-bottom flex">
        <text class="iconfont icon icon-biaoqian f18"></text>
        <u-tag :text="glist.fname" plain></u-tag>
      </view>
      <!-- 产品提示 -->
      <view v-if="glist.goodsTips" class="goodswarr u-border-bottom flex">
        <text class="iconfont icon icon-gantanhaozhong warrText"></text>
        <text class="margin-bottom warrText">{{ glist.goodsTips }}</text>
      </view>
      <!-- 产品细则 -->
      <view class="goodsShow u-border-bottom">{{ glist.chineseBrief }}</view>
      <!-- 产品优惠 -->
      <view class="goodsTicket flex justify-between" @click="show = !show">
        <text>促销</text>
        <view class="ticket">
          <view class="ticket flex">
            <u-tag class="tag" borderColor="#f0250f" size="mini" color="#f0250f" text="换购" plain>
            </u-tag>
            买蛋糕可至购物车参加优惠换购
          </view>
          <view class="ticket flex">
            <u-tag class="tag" borderColor="#f0250f" size="mini" color="#f0250f" text="赠劵" plain>
            </u-tag>
            2022年新人活动
          </view>
        </view>
        <text class="ticket">
          详情
          <text class="iconfont icon icon-more"></text>
        </text>
      </view>
      <!-- 促销弹窗 -->
      <u-popup :show="show" mode="bottom" :round="10" @close="show = !show">
        <view class="popup">
          <view class="popupTitle u-border-bottom">促销</view>
          <view class="popupContent flex">
            <u-tag class="margin-right" borderColor="#f0250f" size="mini" color="#f0250f" text="换购" plain></u-tag>
            买蛋糕可至购物车参加优惠换购
          </view>
          <view class="popupContent flex">
            <u-tag class="margin-right" borderColor="#f0250f" size="mini" color="#f0250f" text="赠劵" plain></u-tag>
            2022年新人活动
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 加购按钮 -->
    <view class="flexd">
      <button class="left">立即购买</button>
      <button @click="handleAdd(goodsInfo)" class="right">加入购物车</button>
    </view>

    <!-- 咨询入口 -->
    <view class="chat" @click="handlChat">
      <u-icon name="chat-fill" color="#857a72" size="36"></u-icon>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    data() {
      return {
        listImg: [],
        glist: {},
        myDate: {
          myYear: '',
          myMonth: '',
          myDay: '',
        },
        num: 0, // 选中规格下标
        list: [],
        handleStyle: 0,
        show: false,
      }
    },
    computed: {
      ...mapGetters('cart',['total']),
      goodsAhead() {
        if (this.glist.list !== undefined) {
          return this.glist.list[this.num].ahead
        }
      },
      goodsSize() {
        if (this.glist.list !== undefined) {
          return this.glist.list[this.num].size
        }
      },
      goodsfittings() {
        if (this.glist.list !== undefined) {
          return this.glist.list[this.num].fittings
        }
      },
      goodsPrice() {
        if (this.glist.list !== undefined) {
          return this.glist.list[this.num].price
        }
      },
      goodsInfo() {
        return {
          ...this.glist,
          idx: this.num,//商品规格
          goods_count: 1, // 商品的数量
          isCheck: true // 商品的勾选状态
        }
      }
    },
    methods: {
      getGoodsDetail(id) {
        this.$H.get(`/1.1/classes/classify?where={"id":"${id}"}`).then(res => {
          console.log(res);
          this.glist = res.data.results[0]
          // console.log(this.glist)
          // 获取图片
          let url = this.glist.list[0].pic.url
          if (url) {
            let len = this.glist.list[0].pic.list.length
            for (var i = 1; i <= len; i++) {
              let img = [...url, '/middle/', String(i), '.jpg'].join('')
              this.listImg.push(img)
            }
            console.log(this.glist.list[this.num])
          } else {
            let len = this.glist.list[0].pic.list.length - 1
            for (var i = 1; i <= len; i++) {
              let img = this.glist.list[0].pic.list[i].url
              this.listImg.push(img)
            }
            console.log(this.glist.list[this.num])
          }
        })
      },
      handleScale(index) {
        this.num = index
        this.handleStyle = index
      },
      handleAdd(obj) {
        this.$store.commit('cart/addCart', obj)
        uni.switchTab({
          url: '/pages/cart/cart',
          success: () => {
            this.$store.commit('comunication/changeTab', 'cart')
          }
        })
      },
      handlChat() {
        uni.navigateTo({
          url: "/pagesB/chat/chat"
        });
      }
    },
    onLoad(options) {
      // 获取当前时间
      let myDate = new Date()
      // console.log(myDate);
      let myYear = myDate.getFullYear() // 获取当前年份
      this.myDate.myYear = myYear
      let myMonth = myDate.getMonth() + 1 // 获取当前月份
      this.myDate.myMonth = myMonth
      let myDay = myDate.getDate() // 获取当前日（1- 31）
      this.myDate.myDay = myDay
      this.getGoodsDetail(options.id)
    }
  }
</script>


<style lang="scss" scoped>
  /deep/ .u-tag--medium {
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
  }

  /deep/ .u-tag--primary--plain {
    border-width: 1px;
    border-color: #cecece;
  }

  /deep/ .u-tag__text--primary--plain {
    color: #000;
    font-weight: 500;
  }

  /deep/ .icon {
    font-size: 40rpx;
  }

  /deep/ .uni-swiper-dots-horizontal {
    bottom: 100rpx;
  }

  .banner {
    height: 800rpx;

    .swiper-item {
      .swiperImg {
        width: 100%;
        height: 1000rpx;
      }
    }
  }

  .cont {
    .fontBox {
      text-align: center;

      .goodsfont {
        font-size: 60rpx;
      }
    }

    .goodsScale {
      width: 95%;
      height: 150rpx;
      transform: translateX(2.5%);

      .scale {
        text-align: center;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
      }

      .flexSuba {
        background-color: #ffcd20;
      }
    }
  }

  .goodsPrice {
    .price {
      font-size: 50rpx;
      padding-left: 5rpx;
    }
  }

  .icon {
    font-size: 30rpx;
    padding: 0 10rpx;
  }

  .goodsGet,
  .goodsPrice,
  .goodsTag,
  .goodswarr,
  .goodsShow,
  .goodsTicket {
    width: 95%;
    padding: 25rpx 0 25rpx 0;
    transform: translateX(2.5%);
  }

  .goodsCont {
    padding-bottom: 130rpx;

  }

  .goodsTag {
    line-height: 50rpx;
    text-align: center;
  }

  .goodswarr {
    color: #f0250f;
    text-align: left;

    // padding-bottom: 55rpx;
    .icon-gantanhaozhong {
      font-size: 45rpx;
    }

    .warrText {
      line-height: 40rpx;
      height: 40rpx;
    }
  }

  .ticket {
    line-height: 50rpx;
  }

  .popup {
    height: 600rpx;
  }

  .popupTitle {
    font-size: 40rpx;
    text-align: center;
    font-weight: bold;
    padding: 50rpx 0 20rpx 0;
  }

  .popupContent {
    line-height: 50rpx;
    margin: 30rpx;
  }

  .u-tag {
    margin-right: 10rpx !important;
  }

  .goodsTicket {
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    /* #endif */
  }

  // 底部加购按钮
  .flexd {
    box-sizing: border-box;
    padding: 10rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    // justify-content: space-between;
    background-color: #fff;
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    /* #endif */

    .left,
    .right {
      flex: 1;
      height: 100rpx;
      border-radius: 20rpx;
      line-height: 100rpx;
      font-size: 30rpx;
      font-weight: bold;
    }

    .left {
      background-color: #857a72;
      color: white;
    }

    .right {
      /* #ifdef MP-WEIXIN */
      margin-right: 20rpx;
      margin-left: 10rpx;
      /* #endif */
      /* #ifdef H5 */
      margin-left: 10rpx;
      /* #endif */

      background-color: #ffe32a;
      color: #000;
    }
  }

  .chat {
    background: #ffe32a;
    padding: 20rpx;
    border-radius: 50%;
    position: fixed;
    bottom: 300rpx;
    right: 20rpx;
  }

  .tag {
    margin-right: 10rpx;
  }

  .margin-right {
    margin-right: 10rpx;
  }
</style>
